<template>
	<view class="col" style="position: relative;margin-top: 10px;">
		<view class="back"><image src="../../static/images/back_blue.png" class="back-icon" @click="goback"></image></view>
		
		<view class="bg" style="margin-bottom: 190px;">
			<view class="row-center">
			<view class="avater" @click="showAvater = true"></view>
			</view>
			<view class="row-center" style="margin-top: 20px;">
				<view class="title" v-if="!editNick">{{info.nick}}</view>
				<view  style="width: 200px;"  v-if="editNick">
					<u-input class="title"  v-model="info.nick" border="bottom" inputAlign="center" fontSize="28"> </u-input >
				</view>
				
				<image src="../../static/images/pens.png" class="pen" @click="editNick = true" v-if="!editNick "></image>
				<image src="../../static/images/pen-green.png" class="pen3" @click="editNick =false" v-if="editNick "></image>
				<image src="../../static/images/delete.png" class="pen3" @click="editNick = false"  v-if="editNick"></image>
			</view>
			<view class="row-between" style="margin-top: 40px;">
				<view class="title2">兴趣标签</view>
				<image src="../../static/images/pens.png" class="pen2" @click="showTags = true"></image>
			</view>
			<view class="Grid">
				<view class="Grid-Item" v-for="item in typeList" :key="item.id">
					<view class="row">
						<image src="../../static/images/tags.png" class="tags"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="row-between">
				<view class="title2">收货地址</view>
				<image src="../../static/images/pens.png" class="pen2" @click="showAddress = true"></image>
				
			</view>
			<view class="address">阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是阿萨飒飒飒飒飒飒飒飒是</view>
		</view>

		<view class="bg bottom">
			<view class="btn">退出登录</view>
		</view>
		
		<u-popup :show="showAvater" overlayStyle="background:rgba(255, 255, 255, 0.5)" bgColor="transparent" :closeOnClickOverlay="true" @close="close()">
			<view class="col" style="background-color: rgba(255, 255, 255, 0.5);">
				<view class="pop-p" style="background-color: transparent;">
					<view class="pop-buy" style="z-index: 1000;">头像</view>
					<view class="pop" style="margin-top: -30px;">
						<view class="avater-content">
						</view>
						<view class="choose">
							从相册中选取
						</view>
					</view>
						
					<view class="row-arround" style="width: calc(100% - 70px);margin-top: -30px;">
						<view class="red-cicle" @click="showAvater = false">
							<image src="../../static/images/order_back.png" class="search-icon2"></image>
						</view>
						<view class="blue-cicle" @click="showAvater = false">
							<image src="../../static/images/bill_sure.png" class="search-icon2"></image>
						</view>
					</view>
				</view>
				<view style="height: 30px;"></view>
			</view>
		</u-popup>

		<u-popup :show="showAddress" overlayStyle="background:rgba(255, 255, 255, 0.5)" bgColor="transparent" :closeOnClickOverlay="true" @close="close()">
			<view class="col" style="background-color: rgba(255, 255, 255, 0.5);">
				<view class="pop-p" style="background-color: transparent;">
					<view class="pop-buy" style="z-index: 1000;">地址</view>
					<view class="pop" style="margin-top: -30px;">
						<view class="col-center" style="margin-top: 50px;">
							<view  style="width: 100px;"  >
								<u-input class="address-text" placeholder="输入姓名"  v-model="info.nick"  inputAlign="center" fontSize="14"> </u-input >
							</view>
							<view  style="width: 150px;margin-top: 10px;"  >
								<u-input class="address-text" placeholder="输入手机号"  v-model="info.nick"  inputAlign="center" fontSize="14"> </u-input >
							</view>
							<view  style="width: 250px;margin-top: 15px;margin-bottom: 50px;"  >
								<u--textarea  class="address-text" placeholder="输入地址"  v-model="info.nick"  inputAlign="center" fontSize="14"> </u--textarea  >
							</view>
						</view>
					</view>
						
					<view class="row-arround" style="width: calc(100% - 70px);margin-top: -30px;">
						<view class="red-cicle" @click="showAddress = false">
							<image src="../../static/images/order_back.png" class="search-icon2"></image>
						</view>
						<view class="blue-cicle" @click="showAddress = false">
							<image src="../../static/images/bill_sure.png" class="search-icon2"></image>
						</view>
					</view>
				</view>
				<view style="height: 30px;"></view>
			</view>
		</u-popup>

		<u-popup :show="showTags" overlayStyle="background:rgba(255, 255, 255, 0.5)" bgColor="transparent" :closeOnClickOverlay="true" @close="close()">
			<view class="col" style="background-color: rgba(255, 255, 255, 0.5);">
				<view class="pop-p" style="background-color: transparent;">
					<view class="pop-buy" style="z-index: 1000;">标签</view>
					<view class="pop" style="margin-top: -30px;">
						<view class="col-center" style="margin-top: 50px;">
							<view class="Grid">
								<view class="Grid-Item2" v-for="item in typeList" :key="item.id">
									<view class="Grid-Item2-text">
										<view>{{item.name}}</view>
									</view>
								</view>
							</view>
						</view>
							<view style="height: 75px;"></view>	
					</view>
				
					<view class="row-arround" style="width: calc(100% - 70px);margin-top: -30px;">
						<view class="red-cicle" @click="showTags = false">
							<image src="../../static/images/order_back.png" class="search-icon2"></image>
						</view>
						<view class="blue-cicle" @click="showTags = false">
							<image src="../../static/images/bill_sure.png" class="search-icon2"></image>
						</view>
					</view>
				</view>
				<view style="height: 30px;"></view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		saveInfo,getInfo
	} from '@/api/change/index.js'
	
	export default {
		data() {
			return {
				info:{
					nick:'昵称'
				},
				showTags:false,
				showAddress:false,
				editNick:false,
				showAvater:false,
				typeList:[
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},{
						name:1
					},{
						name:1
					}
				],
				requestParams:{},
				info:{}
			}
		},
		
		onLoad(){
			this.getInfo()
		},
		
		methods: {
			goback(){
				uni.navigateBack()
			},
			getInfo(){
				getInfo().then(res=>{
					this.info = res.data
				})
			},
			saveInfo(){
				saveInfo(this.requestParams).then(res=>{
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-border-bottom{
		border-bottom-width: 2px !important;
		border-color: #4f4f4f !important;
	}
	.u-border{
		border-width: 2px !important;
		border-color: #4f4f4f !important;
		border-radius: 15px;
	}
	.u-textarea-radius{
		border-radius: 35px;
	}
	.address{
		margin: 5px 25px 40px 25px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: HappyZcool-2016;
	}
	.back-icon{
		width: 19px;
		height: 19px;
	}
	.Grid {
		margin-top: 15px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			padding:10rpx 0;
			.Grid-Item2{
				margin-top: 20px;
				width: 45%;
				height: 50px;
				line-height: 20px;
				border-radius: 20px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 3px solid rgba(79, 79, 79, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				.Grid-Item2-text{
					color: rgba(16, 16, 16, 1);
					font-size: 28px;
					text-align: center;
					font-family: ZKKuaiLeTi-regular;
				}
			}
			.Grid-Item {
				width: 33%;
				height: 160rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing:border-box;
				.GSimg {
					width: 96rpx;
					height: 96rpx;
					margin-top: 42rpx;
					margin-left: 50rpx;
					.Image {
						width: 96rpx;
						height: 96rpx;
					}
				}
				
				.type-circle {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60px;
					height: 60px;
					line-height: 20px;
					background-color: white;
					text-align: center;
					border: 5px solid rgba(79, 79, 79, 1);
				}
				.GStitle {
					width: 100%;
					height: 34rpx;
					line-height: 34rpx;
					color: #06121e;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	
	.red-cicle {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		line-height: 20px;
		background-color: rgba(254, 121, 74, 1);
		text-align: center;
		border: 5px solid rgba(79, 79, 79, 1);
	}
	.blue-cicle {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		line-height: 20px;
		background-color: #81B337;
		text-align: center;
		border: 5px solid rgba(79, 79, 79, 1);
	}
.back{
	margin-left: 10px;
	width: 40px;
	height: 40px;
	background-color: rgba(147, 210, 243, 1);
	text-align: center;
	border: 3px solid rgba(79, 79, 79, 1);
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.title2{
	margin-left: 30px;
	color: rgba(16, 16, 16, 1);
	font-size: 28px;
	text-align: left;
	font-family: HappyZcool-2016;
}
.tags{
	width: 24px;
	height: 24px;
}
.pen{
	width: 40px;
	height: 40px;
}
.pen2{
	margin-right: 30px;
	width: 30px;
	height: 30px;
}
.pen3{
	margin-right: 10px;
	width: 30px;
	height: 30px;
}
.title{
	color: rgba(79, 79, 79, 1);
	font-size: 36px;
	text-align: center;
	font-family: HappyZcool-2016;
}
.address-text{
	font-size: 18px;
}
.avater{
	margin-top: -50px;
	width: 100px;
	height: 100px;
	border-radius: 25px;
	border: 3px solid rgba(79, 79, 79, 1);
}
.bg{
	margin-top: 40px;
	margin-left: 20px;
	margin-right: 20px;
	line-height: 20px;
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 1);
	color: rgba(16, 16, 16, 1);
	font-size: 14px;
	text-align: center;
	font-family: Arial;
	border: 3px solid rgba(79, 79, 79, 1);
	display: flex;
	flex-direction: column;
}

.bottom{
	width: calc(100% - 40px);
	position: fixed;
	bottom: 32px;
}

.btn{
	margin: 30px 24px;
	height: 70px;
	border-radius: 25px;
	background-color: rgba(255, 191, 107, 1);
	text-align: center;
	border: 3px solid rgba(79, 79, 79, 1);
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	color: rgba(79, 79, 79, 1);
	font-size: 32px;
	text-align: center;
	font-family: HappyZcool-2016;
	
}

	.search-icon2{
		width: 40px;
		height: 40px;
	}
	.pop-p{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		margin-right: 20px;
		position: relative;
	}
	
	.avater-content{
			margin-top: 50px;
		top: 400px;
		width: 200px;
		height: 200px;
		border-radius: 25px;
		background-color: #E8E8E8;
	}
	
	.choose{
		margin-bottom: 43px;
		margin-top: 40px;
		color: rgba(16, 16, 16, 1);
		font-size: 28px;
		text-align: center;
		font-family: HappyZcool-2016;
	}
	
	.pop {
	
		align-items: center;
		width: calc(100% - 60px);
		line-height: 20px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		flex-direction: column;
	}
	.pop-goods-img {
		margin-top:14px ;
		width: 330px;
		height: 330px;
		border-radius: 15px 15px 0 0 ;
		background-color: red;
	}
	.pop-img {
		width: 60px;
		height: 60px;
	}

	.pop-name {
		margin-top: 18px;
		color: rgba(16, 16, 16, 1);
		font-size: 36px;
		text-align: left;
		font-family: HappyZcool-2016;
	}

	.pop-desc {
		margin-top: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
	font-family: HappyZcool-2016;
	}

	.pop-price {
		color: rgba(189, 49, 36, 1);
		font-size: 36px;
		text-align: left;
	font-family: HappyZcool-2016;
	}

	.pop-buy {
		width: 120px;
		height: 60px;
		line-height: 20px;
		border-radius: 20px;
		background-color: rgba(255, 191, 107, 1);
		text-align: center;
		border: 4px solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36px;
		font-family: HappyZcool-2016;
	}

	.pop-back {
		width: 120px;
		height: 60px;
		line-height: 20px;
		border-radius: 20px;
		background-color: rgba(255, 191, 107, 1);
		text-align: center;
		border: 4px solid rgba(79, 79, 79, 1);
	}
	

</style>
